<template>
  <div class="root">
    <m-header title="线下搭讪暗号">
      <div slot="left" v-on:click="exitProgram">
        <img class="m-icon-img margin-right-10" src="../assets/images/menu_close.png" />
      </div>
      <div slot="right">
        <img class="m-icon-img margin-right-10" src="../assets/images/menu_more.png" />
      </div>
    </m-header>

    <div class="content">
      <div class="amount-con">
        <div class="amount-title">
          线下搭讪暗号：
        </div>
        <div class="amout-data">
          <mu-text-field hintText="你希望别人怎么和你打招呼" v-model="secretSignal" fullWidth />
        </div>

        <div class="amount-title">
          别人查看你暗号的价格：
        </div>
        <div class="amout-data">
          <mu-text-field hintText="你希望别人花多少钱查看你的暗号(单位:元)" type="number" v-model.number="price" fullWidth />
        </div>

      </div>

      <div class="agree-clause">
        我已阅读并同意<span class="link" @click="link2Terms">《地铁AR交友服务条款》</span>
      </div>

      <div class="buttonCon">
        <!--<mu-raised-button label="开始社交" class="raised-button" backgroundColor="#02a588" @click="setSecretSignal" />-->
        <mu-raised-button label="开始社交" class="raised-button" backgroundColor="#fd4ba3" @click="setSecretSignal" />
      </div>
    </div>
  </div>
</template>

<script>
  import mHeader from '../components/header'
  import util from '../util/util.js'
  export default {
    components: {
      mHeader
    },
    data() {
      return {
        secretSignal: '',
        price: ''
      }
    },
    methods: {
      setSecretSignal() {
        if (this.price < 0) return util.toast('请输入正确的金额');
        if (this.secretSignal.length === 0) return util.toast('暗号不能为空');

        var _this = this;
        this.$http.post('user/secret/signal', {
          secretSignal: _this.secretSignal,
          secretSignalPrice: _this.price
        }).then(
          function (response) {
            if (response.data.code === '0') {
              _this.$router.replace('/home/arsocial');
            } else {
              util.toast(response.data.msg);
            }
          }
        );
      },

      exitProgram() {
        console.log('exitProgram');
        var url = 'jsbridge://exitProgram';
        var iframe = document.createElement('iframe');
        iframe.style.width = '1px';
        iframe.style.height = '1px';
        iframe.style.display = 'none';
        iframe.src = url;
        document.body.appendChild(iframe);
        setTimeout(function () {
          iframe.remove();
        }, 100);
      },

      link2Terms() {
        this.$router.push('/termsofservice');
      }
    }
  }

</script>

<style lang="less">
  .agree-clause {
    padding: 4px 16px;
    .link {
      color: #03a9f4;
    }
  }

</style>
